/*
 * 
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃ 　
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃　　　　　　　　　　　
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug　　
 * 　　　┃　　　┃　　+　　　　　　　　　
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 * 
 * 
 * @Descripttion: 
 * @version: 
 * @Author: vai-bowei
 * @Date: 2021-10-19 09:11:00
 * @LastEditors: vai-bowei
 * @LastEditTime: 2021-10-19 09:11:00
 */
.search_container{
    width: 100%;
    min-width: 125px;
    height: 60px;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 55px 0 15px;
    position: relative;
    .search_icon_wrapper{
        width: 25px;
        height: 100%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-top: 3px;
        .search_icon{
            width: 25px;
            height: 25px;
            font-size: 25px;
            &::before{
                color: rgb(183,183,183);
            }
        }
        .search_icon_focus{
            &::before{
                color:rgb(74,74,74);
            }
        }
    
    }

    .search_input{
        flex: 1;
        height: 100%;
        font-size: 24px;
        color: rgb(22,22,22);
        border:none;
        outline: none;
        margin-left: 5px;
        color: rgb(22,22,22);
        input{
            height: 100%;
        }
        input::-webkit-input-placeholder{
            color:rgb(175,175,175);
            font-size:24px;     
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:rgb(175,175,175);
            font-size:24px;     
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:rgb(175,175,175);
            font-size:24px;    
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
            color:rgb(175,175,175);
            font-size:24px;     
        }
    }    
    .search_input_placeholder{
        color: rgb(175,175,175);
    }  

    .search_del{
        width: 32px;
        height: 32px;
        background-color: rgb(209,209,209);
        border-radius: 50%;
        position: absolute;
        top: 14px;
        right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
        // font-size: 14px;
        // color: rgb(255,255,255);
        // text-align: center;
        // line-height: 32px;
        .search_del_icon{
            width: 14px;
            height: 14px;
            display: block;
            margin:9px auto 0;
        }
    }
}
.search_container_tran{
    transition: width 0.15s ease-in-out;
}
.search_container_fold{
    padding: 0 20px 0 15px;
}